html, body, ul, li, p{
    margin: 0;
    padding: 0;
    font-size: 14px;
}
html, body {
    height: 100%;
}
li {
    list-style: none;
}
body {
    display: flex;
}
/* 一级菜单 */
.menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    background: #1d2531;
    padding: 10px 0 20px 0;
}
.menu .menu-item {
    padding: 10px 20px;
}
.menu .menu-item-a {
    display: block;
    width: 60px;
    height: 60px;
}
.bottom-actions {
    display: flex;
    justify-content: space-between;
	width: 48px;
	height: 16px;
}

/* 二级菜单 */

.menu-secondary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    width: 250px;
    padding: 0 30px 23px 30px;
    background-color: #222c3c;
    overflow: auto;
    flex-shrink: 0;
}
.menu-secondary::-webkit-scrollbar {
    display:none
}
.child-menu {
    padding: 18px 0;
    border-bottom: 1px solid #2a3547;
}
.child-menu .menu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    color: #5b6779;
}
.child-menu .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
}
.child-menu .item span {
    font-size: 14px;
	color: #b7c0cd;
}
.child-menu .item .tag {
    border-radius: 12px;
    background-image: -moz-linear-gradient( 90deg, rgb(25,145,235) 0%, rgb(46,161,248) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(25,145,235) 0%, rgb(46,161,248) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(25,145,235) 0%, rgb(46,161,248) 100%);
    padding: 0 12px;
    height: 25px;
    color: #fff;
    line-height: 25px;
    font-style: initial;
}
.child-menu .item .tag-error {
    border-radius: 12px;
    background-image: -moz-linear-gradient( -90deg, rgb(244,84,56) 0%, rgb(203,39,10) 100%);
    background-image: -webkit-linear-gradient( -90deg, rgb(244,84,56) 0%, rgb(203,39,10) 100%);
    background-image: -ms-linear-gradient( -90deg, rgb(244,84,56) 0%, rgb(203,39,10) 100%);
    padding: 0 12px;
    height: 25px;
    color: #fff;
    line-height: 25px;
    font-style: initial;
}
.child-menu2 .item {
    justify-content: flex-start;
}
.child-menu2 .item i {
    margin-right: 10px;
}

.server-capacity {
    align-self: center;
	width: 190px;
    height: 31px;
    color: #fff;
}
.server-capacity .text {
    display: flex;
    justify-content: space-between;
}
.server-capacity .bar {
    margin-top: 15px;
    width: 190px;
	height: 4px;
	background-color: rgba(71, 83, 100, 0.3);
	border-radius: 2px;
}
.server-capacity .bar-fill {
    width: 40px;
	height: 4px;
	background-image: linear-gradient(0deg, 
		#7f5be6 1%, 
		#9d8fe3 100%);
	border-radius: 2px;
}
main {
    flex-grow: 1;
}
main .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 80px;
	background-color: #ffffff;
	box-shadow: 0px 1px 1px 0px 
		rgba(0, 0, 0, 0.05);
}
main .header .title{
    font-size: 24px;
	line-height: 50px;
	color: #354052;
}
main .header .user-info {
    display: flex;
}
.header .user-info .img {
    position: relative;
    margin-right: 15px;
}
.header .user-info .state {
    position: absolute;
    right: 0;
    bottom: 0;
}
.user-info .info {
    margin-right: 15px;
}
.user-info .info .name{
	font-size: 16px;
	color: #2399f1;
}
.user-info .info .admin{
	color: #b5b5b5;
}
.user-info .btn {
    display: flex;
    align-items: center;
}
main .content {
    display: flex;
    height: calc(100% - 81px);
}
.pal {
    width: 400px;
    border-right: 1px solid #e6e9ec;
    height: 100%;
}
.pal .seek {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid #e6e9ec;
}
.pal input {
	width: 340px;
	height: 36px;
	border-radius: 4px;
	border: solid 1px #e5e8ee;
}
.pal .input {
    position: relative;
}
.pal .input i {
    position: absolute;
    right: 14px;
    bottom: 10px;
}
.pal .pal-list {
    overflow: auto;
    height: calc(100% - 70px);
}
.pal-list .pal-item {
    box-sizing: border-box;
    padding: 15px 20px 20px 30px;
}
.pal-list::-webkit-scrollbar {
    display:none
}
.pal-item .info .name {
    color: #585d68;
}
.option .info .name {
    color: #2399f1;
}
.option {
    border-left: #2399f1 solid 3px;
}
.pal-item .user {
    display: flex;
    justify-content: space-between;
}
.pal-item .user-info {
    display: flex;
}
.pal-item .user-info .img {
    margin-right: 15px;
}
.pal-item .way {
    color: #7f8fa4;
}
.pal-item .summ {
    display: flex;
    margin-top: 14px;
}
.pal-item .summ-text {
	height: 32px;
    font-size: 14px;
    overflow: hidden;
	color: #585d68;
}
.pal-item .summ .tag {
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
	background-image: linear-gradient(0deg, 
		#1991eb 0%, 
		#2ea1f8 100%);
    border-radius: 12px;
    margin-left: 15px;
}
.option .name::before {
    content: "● ";
}
.message {
    flex-grow: 1;
}
.message .seek {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 10px;
    border-bottom: 1px solid #e6e9ec;
}
.message .name {
    font-size:18px;
    font-family:ProximaNova-Semibold;
    color:rgba(88,93,104,1);
}
.message .isupdata::after {
    content: "  ●";
    color: #1BB934;
}
.message .operation {
    display: flex;
    align-items: center;

}
.message .text {
    font-size:14px;
    font-family:ProximaNova-Semibold;
    color:rgba(86,104,138,1);
    margin-right: 15px;
}
.message .hr-v {
    margin: 0 15px;
    width:1px;
    height:30px;
    background:rgba(206,208,218,1);
}
.message .btn-box {
    display: flex;
    /* justify-content: space-around;
    align-items: center;
    width:109px;
    height:32px; */
    background-image: linear-gradient(0deg, 
		#F1F3F7 0%, 
        #FFFFFF 100%);
        border: 1px solid #CED0DA;
    border-radius:4px;
}
.message  .btn-box .item {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #CED0DA;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.message .btn-box .no-border {
    border: none;
}
.message .msg-list {
    overflow: auto;
    height: calc(100% - 70px);
}
.msg-list::-webkit-scrollbar {
    display:none
}
.msg-item {
    display: flex;
    padding: 25px 0;
}
.msg-item .profile-picture{
    /* float: left; */
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 96px;
}
.msg-item .msg-main {
    /* float: left; */
    flex-grow: 1;
}
.msg-item .photos {
    display: flex;
}
.msg-item .photos .photo-box {
    position: relative;
    border-radius: 4px;
    width:156px;
    height:100px;
    margin: 10px 10px 0 0;
    overflow: hidden;
    cursor: pointer;

}
.photo-box .mask {
    position: absolute;
    top: 100px;
    left: 0;
    width:156px;
    height:100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    transition: top .4s;
}
.photo-box:hover .mask {
    top: 0;
}
.photo-box .mask .ss {
    display: flex;
    justify-content: center;
    align-items: center;
    width:50px;
    height:50px;
    border-radius: 50%;
    background:rgba(255, 255, 255, .3);
}

.msg-main .title {
    display: flex;
    align-items: center;
}
.msg-main .title .name {
    margin-right: 10px;
    font-size:16px;
    font-family:ProximaNova-Semibold;
    color:rgba(88,93,104,1);
}
.msg-main .title .time {
    font-family:ProximaNova-Semibold;
    color:rgba(127,143,164,1);
}
.msg-main .msg-item-content {
    padding: 10px 50px 10px 0;
    font-family:ProximaNova-Regular;
    color:rgba(88,93,104,1);
}

.hr1 {
    position: relative;
    text-align: center;
    color: #7F8FA4;
}
.hr1 span {
    position: relative;
    padding: 0 10px;
    z-index: 2;
    background: #fff;
}
.hr1::before {
    position: absolute;
    top: 8px;
    display: block;
    content: "";
    width: 100%;
    height:1px;
    background:rgba(159,169,186,1);
    opacity:0.4;
}

.hr2 {
    color: #2399F1;
}